<template>
    <div class="login-container">
        <div class="login-box">
            <div style="padding: 50px 30px;background-color: white;margin-right: 100px;border-radius: 5px">
                <el-form :model="loginForm"
                         ref="ruleFormRef"
                         :rules="rules"
                         status-icon
                         show-message
                         style="width: 350px"
                         label-position="right">
                    <div style="margin-bottom: 30px;font-size: 20px;color: #2c82ff;font-weight: bolder;text-align: center">
                        登录
                    </div>
                    <el-form-item prop="userAccount">
                        <el-input v-model="loginForm.userAccount" placeholder="请输入用户名" prefix-icon="User"/>
                    </el-form-item>
                    <el-form-item prop="userPassword">
                        <el-input v-model="loginForm.userPassword" placeholder="请输入密码" prefix-icon="Lock"
                                  type="password" show-password/>
                    </el-form-item>
                    <p>忘记密码？</p>
                    <div style="margin-bottom: 20px">
                        <el-button size="large" type="primary" style="width: 100%" @click="doLogin(loginForm)">登录
                        </el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref} from "vue";
import myAxios from "@/axios/axios.js";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import {useLoginUserStore} from "@/stores/useLoginUserStore.js";

const router = useRouter();

const loginUserStore = useLoginUserStore()
const loginForm = ref({
    userAccount: '',
    userPassword: ''
});
const ruleFormRef = ref();

const rules = ref({
    userAccount: [
        {required: true, message: '请输入用户名', trigger: 'blur'},
        {min: 4, message: '长度不能小于 4 个字符', trigger: 'change'},
    ],
    userPassword: [
        {required: true, message: '请输入密码', trigger: 'blur',},
        {min: 8, message: '长度不能小于 8 个字符', trigger: 'change'},
    ]
})
const doLogin = (loginForm) => {
    ruleFormRef.value.validate(async (valid) => {
        if (valid) {
            const res = await myAxios.post("/user/login", {
                userAccount: loginForm.userAccount,
                userPassword: loginForm.userPassword
            });
            if (res.code === 0 && res.data) {
                await loginUserStore.fetchLoginUser()
                if (res.data.userRole === 'user') {
                    await router.push("/article")
                } else if (res.data.userRole === 'admin') {
                    await router.push("/manager/home")
                } else {
                    return false;
                }
                ElMessage.success("登录成功")
            } else {
                ElMessage.error("用户名或密码错误")
            }
        } else {
            ElMessage.warning("用户名或密码不能为空")
            console.log('error submit!');
            return false;
        }
    })

}
</script>

<style scoped>
.login-container {
    height: 100vh;
    overflow: hidden;
    background-image: url("@/assets/img/background.jpg");
    background-size: cover;
    background-position: 0 -50px;
}

.login-box {
    /*margin: 20px auto;*/
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>